<template>
  <div class="about">
    <!-- 联系人 -->
    <div class="contact">
      <ul v-if="chatAll.length > 0">
        <li
          v-for="(item, index) in chatAll"
          :key="item.user.id"
          @click="contact(item.user.id)"
        >
          <img :src="item.user.img" alt="" />
          <p>{{ item.user.name }}</p>
        </li>
      </ul>
    </div>
    <!-- 聊天窗口 -->
    <div class="chat" v-if="isShow">
      <!-- 名称 -->
      <div class="title">{{ chat.name }}</div>
      <!-- 信息 -->
      <div class="info">
        <ul>
          <li
            v-for="item in chat.info"
            :key="item.chatId"
            :class="{ right: item.id == user.id }"
          >
            <img :src="item.img" alt="" />
            <div class="box">
              <p>{{ item.name }}</p>
              <div class="txt">
                <span>{{ item.txt }}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 发送信息 -->
      <div class="send">
        <textarea name="" id="" cols="30" rows="10" v-model="txt"></textarea>
        <div>
          <button @click="send()">发 送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
import { mapState, mapMutations } from "vuex";
import { io } from "socket.io-client";
let socket = io.connect("http://192.168.9.24:3000/");

//  socket.lo模块/
export default {
  data() {
    return {
      // 个人信息

      // 全部聊天
      chatAll: [
        // {
        //   user: {
        //     id: 2,
        //     name: "user",
        //     img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F91%2F81%2Fd7%2F9181d7d8787f7e96f0017da5e61ad27d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656570079&t=66af8273b428b2f840297aa289a3fb5f",
        //   },
        //   info: [
        //     {
        //       info: "01",
        //       id: 1,
        //       name: "admin",
        //       img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F91%2F81%2Fd7%2F9181d7d8787f7e96f0017da5e61ad27d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656570079&t=66af8273b428b2f840297aa289a3fb5f",
        //       txt: "11111111",
        //     },
        //     {
        //       id: 2,
        //       name: "user",
        //       img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F91%2F81%2Fd7%2F9181d7d8787f7e96f0017da5e61ad27d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656570079&t=66af8273b428b2f840297aa289a3fb5f",
        //       txt: "aaaaaaa",
        //     },
        //   ],
        // },
        // {
        //   user: {
        //     id: 3,
        //     name: "root",
        //     img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F91%2F81%2Fd7%2F9181d7d8787f7e96f0017da5e61ad27d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656570079&t=66af8273b428b2f840297aa289a3fb5f",
        //   },
        //   info: [
        //     {
        //       id: 1,
        //       name: "admin",
        //       img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F91%2F81%2Fd7%2F9181d7d8787f7e96f0017da5e61ad27d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656570079&t=66af8273b428b2f840297aa289a3fb5f",
        //       txt: "AAAAAAAAAAA",
        //     },
        //     {
        //       id: 2,
        //       name: "user",
        //       img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F91%2F81%2Fd7%2F9181d7d8787f7e96f0017da5e61ad27d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656570079&t=66af8273b428b2f840297aa289a3fb5f",
        //       txt: "33333333",
        //     },
        //   ],
        // },
      ],

      // 联系人id
      contactId: 2,

      // 是否显示聊天窗口
      isShow: false,
      // 聊天信息
      txt: "",
    };
  },
  methods: {
    ...mapMutations(["setUser"]),

    // 显示对应联系人的聊天窗口
    contact(id) {
      // 显示聊天窗口
      this.isShow = true;
      // 清空聊天信息
      this.txt = "";

      // 修改联系人id
      this.contactId = id;
    },

    // 发送消息
    send() {
      // 判断输入框是否为空
      if (this.txt.trim() == "") {
        return;
      }
      // 创建一条消息
      let info = {
        chatId: nanoid(),
        id: this.user.id,
        name: this.user.name,
        img: this.user.img,
        txt: this.txt,
      };
      // 将消息添加到聊天信息中
      this.chatAll.forEach((item) => {
        if (item.user.id === this.contactId) {
          console.log(3, item);
          // 添加
          item.info.push(info);

          // 发送信息
          socket.emit("send", this.contactId, item, this.user);
        }
      });

      // 清空输入框
      this.txt = "";
    },
  },
  computed: {
    ...mapState(["user"]),
    // 获取当前聊天的内容
    chat() {
      // 初始化数据
      let obj = {};
      // 得到当前聊天的记录
      obj.info = this.chatAll.filter(
        (item) => item.user.id == this.contactId
      )[0].info;

      // 得到当前聊天的用户名
      obj.name = this.chatAll.filter(
        (item) => item.user.id == this.contactId
      )[0].user.name;

      // 返回数据
      return obj;
    },
  },
  mounted() {
    // 发送注册信息
    socket.emit("login", this.user);

    // 接收别人注册的信息
    socket.on("login", (data) => {
      console.log(data);
      // 排除自己
      if (this.user.id != data.user.id) {
        this.chatAll.push(data);
      }
    });

    // 接收别人发送的信息
    socket.on("send", (data) => {
      // 初始值
      let flag = true;

      // 查看是否有该联系人
      this.chatAll.forEach((item) => {
        if (item.user.id === data.user.id) {
          flag = false;
        }
      });

      // 判断：该联系人是否存在该数组
      if (flag) {
        this.chatAll.push(data);
      } else {
        this.chatAll = this.chatAll.map((item) => {
          if (item.user.id === data.user.id) {
            return data;
          } else {
            return item;
          }
        });
      }
    });

    // 有人退出了
    socket.on("leave", (data) => {
      // 删除该联系人
      // this.chatAll = this.chatAll.filter((item) => item.user.id != data.user.id);
      console.log('该用户已退出',data);
    });
  },
};
</script>

<style lang="less" scoped>
img {
  width: 50px;
  height: 50px;
  border-radius: 20px;
  margin-right: 10px;
}
.about {
  width: 913px;
  height: 640px;
  background: #c7c6c6;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  .contact {
    width: 250px;
    overflow: hidden;
    height: 100%;
    background-color: #e6e5e5;
    ul {
      box-sizing: border-box;
      padding: 10px 10px;
      li {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        p {
          overflow: hidden;

          text-overflow: ellipsis;

          white-space: nowrap;
        }
      }
    }
  }
  .chat {
    background-color: #c7c6c6;
    width: 100%;
  }
}

.chat {
  .title {
    box-sizing: border-box;
    height: 60px;
    line-height: 60px;
    padding-left: 25px;
    border-bottom: 1px solid #e6e5e5;
  }
  .info {
    height: 400px;
    border-bottom: 1px solid #e6e5e5;
    overflow: auto;
    ul {
      box-sizing: border-box;
      padding: 10px 30px;
      li {
        margin-bottom: 10px;
        display: flex;
        &.right {
          // justify-content: flex-end;
          flex-direction: row-reverse;
          img {
            margin-left: 10px;
          }
        }
        img {
        }
        .box {
          // display: flex;
          p {
            font-size: 12px;
            line-height: 20px;
          }
          .txt {
            background-color: #fff;
            border-radius: 10px;
            padding: 10px;
            span {
            }
          }
        }
      }
    }
  }
  .send {
    height: 180px;
    // height: 100%;
    // background: red;
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    background: #f5f5f5;
    box-sizing: border-box;
    border-right: 1px solid #c7c6c6;
    border-bottom: 1px solid #c7c6c6;
    textarea {
      width: 100%;
      height: 140px;
      background-color: #f5f5f5;
      border: 0;
      outline: none;
      font-size: 20px;
    }
    div {
      // text-align: right;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 50px;
      button {
        margin-right: 10px;
        padding: 1px 10px;
      }
    }
  }
}
</style>
